<template>
  <div>
    <div>
      <el-table :data="data.list" border stripe>
        <el-table-column prop="username" align="center" :fit="false" label="登录账号" width="200">
          <template slot-scope="{row}">
            <el-tooltip effect="light" :border="true" :stripe="true">
              <div slot="content">
                <el-table :data="row.characters" size="mini">
                  <el-table-column prop="name" align="center" label="角色名" width="150"></el-table-column>
                  <el-table-column prop="race" align="center" label="种族" width="100" :formatter="raceFormatter">
                  </el-table-column>
                  <el-table-column prop="class" align="center" label="职业" width="100" :formatter="classFormatter"></el-table-column>
                  <el-table-column prop="gender" align="center" label="性别" width="50" :formatter="genderFormatter"></el-table-column>
                  <el-table-column prop="level" align="center" label="等级" width="50"></el-table-column>
                </el-table>
              </div>
              <el-button type="text" size="mini">
                {{level>2?row.username:row.username.replace(/(\w{2})\w+(\w{1})/,'$1*****$2')}}
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="last_login" align="center" :formatter="timeFormatter" label="上次登录时间" width="200"></el-table-column>
        <el-table-column prop="email" align="center" label="邮箱" width="200"></el-table-column>
        <el-table-column prop="id" align="center" label="在线状态" width="200" :formatter="onlineFormatter"></el-table-column>
        <el-table-column prop="id" align="center" label="操作" v-if="level>2">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="resetPwd(row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="padding-tb">
      <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageNoChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { gameAccountList, gameAccountResetPwd } from "../service/api";
export default {
  computed: {
    ...mapGetters(['level','username'])
  },
  data() {
    return {
      data: {
        list: [],
        total: 0
      },
      pageNo: 1,
      pageSize: 10,
      formLabelWidth: "100px",
      accountFormShow: false,
      accountForm: {
        password: '',
        confirmPassword: '',
      },
      accountFormRules: {
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        confirmPassword: [
          {required: true, message: "请输入确认密码", trigger: "blur"},
          {
            validator: (rule, value, callback) => {
              if(value != this.accountForm.password){
                callback(new Error('两次输入密码不一致!'));
              }else{
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    showForm() {
      this.$refs.accountForm && this.$refs.accountForm.resetFields();
      this.accountFormShow = true;
    },
    timeFormatter(v) {
      // console.log(v)
      if(!v.last_login || v.last_login=='0000-00-00 00:00:00'){
        return '------------';
      }
      v = new Date(v.last_login)
      let year = v.getFullYear(),
          month = ('0' + (v.getMonth() + 1)).slice(-2),
          day = ('0' + v.getDate()).slice(-2),
          hour = ('0' + v.getHours()).slice(-2),
          minute = ('0' + v.getMinutes()).slice(-2),
          second = ('0' + v.getSeconds()).slice(-2)
      return `${year}年${month}月${day}日${hour}:${minute}:${second}`
    },
    raceFormatter({race}) {
      return {
        1: '人类',
        2: '兽人',
        3: '矮人',
        4: '暗夜精灵',
        5: '亡灵',
        6: '牛头人',
        7: '侏儒',
        8: '巨魔'
      }[race]
    },
    classFormatter(row) {
      return {
        1: '战士',
        2: '圣骑士',
        3: '猎人',
        4: '盗贼',
        5: '牧师',
        6: '未知',
        7: '萨满祭司',
        8: '法师',
        9: '术士',
        10: '未知',
        11: '德鲁伊'
      }[row.class]
    },
    genderFormatter({gender}) {
      return {
        1: '女',
        0: '男'
      }[gender]
    },
    onlineFormatter(row) {
      let character = row.characters.find(o=>o.online);
      if(character){
        return `角色[${character.name}]在线`
      }else{
        return '离线'
      }
    },
    pageSizeChange(val) {
      this.fetchData(1, val);
    },
    pageNoChange(val) {
      this.fetchData(val, this.pageSize);
    },
    refreshData() {
      this.fetchData(this.pageNo,this.pageSize);
    },
    fetchData(pageNo = 1, pageSize = 10) {
      this.pageNo = pageNo,
      this.pageSize = pageSize
      gameAccountList({
        pageNo,
        pageSize
      }).then(({data}) => {
        this.data = data.data;
      })
    },
    resetPwd({username}) {
      this.$confirm(`确定要重置用户【${username}】的密码吗？`,'提示信息').then(_=>{
        gameAccountResetPwd({username}).then(({data})=>{
          this.$alert(`密码已重置为【${data.data.newPwd}】,请该用户登录后立刻修改密码`, '提示信息', {
            closeOnClickModal: true
          });
        })
      })
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

<style lang="less" scoped>
.padding-tb {
  padding: 10px 0;
}
</style>
